<template>
  <div class="about">
	  <h3>桌号选择</h3>
    <van-grid :column-num="3" square>
      <van-grid-item class="canel" v-for="item of setlist" :class={active:item.status}>
			  <template slot-scope="text">
				  <h3 @click="diancan(item.setid)">{{item.setid + "号桌"}}</h3>
				   <van-tag v-if="item.status" type="warning">用餐中</van-tag>
				  <van-tag v-else>空闲中</van-tag>
			  </template>
	  </van-grid-item>
    </van-grid>
  </div>
</template>


<script>
	export default {
		data(){
			return{
				setlist:[]
			}
		},
		methods:{
			diancan(setid){
				window.location.href=`${this.$locationurl}/#/diancan/${setid}`
			}
		},
		mounted() {
			this.$axios.get(`${this.$httpurl}/setlist`).then((response)=>{
				this.setlist = response.data
				console.log(this.setlist)
			})
			setInterval(()=>{
				this.$axios.get(`${this.$httpurl}/setlist`).then((response)=>{
					this.setlist = response.data
				})
			},3000)
		}
	}

</script>
<style>
	.active .van-grid-item__content{
		background-color: bisque;
		}	
</style>